<html>
<head>
	<!-- 引入这个分页的js -->
	<script src="https://res.zvo.cn/page/page.js"></script>
</head>

<!-- 注意，这个id="page"不可去掉，page.js 就是根据这个ID来渲染分页的 -->
<div id="page">
	<a id="firstPage" href="javascript:page.list(1);">首页</a>
	<span id="upList"> <!-- 上几页的模板，会输出具体的上几页的页码 -->
		<a href="{href}" class="upList">{title}</a>
	</span>
	当前第{currentPageNumber}页
	<span id="nextList"> <!-- 下几页的模板，会输出具体的下几页的页码 -->
		<a href="{href}" class="nextList">{title}</a>
	</span>
	<a id="lastPage" href="javascript:page.list({lastPageNumber});">尾页</a>
	
	共{allRecordNumber}条，{currentPageNumber}/{lastPageNumber}页
</div>

<script>
//这个pageData的json便是有 https://github.com/xnx3/page.java 直接返回的。这里只是模拟数据
var pageData = {
	    "haveNextPage": true,
	    "lastPage": "http://159.75.169.141/shop/api/goods/list.json?currentPage=2",
	    "nextPage": "http://159.75.169.141/shop/api/goods/list.json?currentPage=2",
	    "currentFirstPage": true,
	    "currentLastPage": false,
	    "upList": [

	    ],
	    "everyNumber": 2,
	    "haveUpPage": false,
	    "limitStart": 0,
	    "nextList": [
	        {
	            "pageNumber": 2,
	            "href": "http://159.75.169.141/shop/api/goods/list.json?currentPage=2",
	            "title": "2"
	        }
	    ],
	    "firstPage": "http://159.75.169.141/shop/api/goods/list.json?currentPage=1",
	    "currentPageNumber": 1,
	    "allRecordNumber": 4,
	    "nextPageNumber": 2,
	    "lastPageNumber": 2,
	    "upPage": "http://159.75.169.141/shop/api/goods/list.json?currentPage=1",
	    "upPageNumber": 1
};

//定义显示第几页的切换, pageNumber便是想要显示的页数，比如用户点击了第二页，这里传入2
page.list = function(pageNumber){
	alert('page number:'+pageNumber);
}

//渲染分页，页面上显示
page.render(pageData);
</script>

</html>